<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<!-- 打卡页面
author：戴布斯
 -->

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dialog Effects | Jim</title>

<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/clockcss/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/clockcss/demo.css" />

<!-- 公共对话框样式 -->
<link rel="stylesheet" type="text/css" href="css/clockcss/dialog.css" />

<!-- css3弹出动画样式 -->
<link rel="stylesheet" type="text/css" href="css/clockcss/button.css" />
<link rel="stylesheet" type="text/css"
	href="css/clockcss/dialog-jim.css" />

<script type="text/javascript" src="js/clockjs/snap.svg-min.js"></script>
<script type="text/javascript" src="js/clockjs/modernizr.custom.js"></script>
<script type="text/javascript" src="js/clockjs/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/clockjs/zzsc.js"></script>

<script type="text/javascript" src="js/clockjs/jquery.backstretch.js"></script>
<!-- 戴布斯：添加alert的样式 -->
<link rel="stylesheet" type="text/css" href="css/logincss/alert.css" />
<script type="text/javascript">
	$(function() {
		$(".content").css({
			opacity : .8
		}); //设置透明度
		$.backstretch([ "img/clockimg/bg1.jpg", "img/clockimg/bg2.jpg",
				"img/clockimg/bg3.jpg", "img/clockimg/bg4.jpg" ], {
			duration : 3000,
			fade : 750
		});

	});
</script>
<style>
* {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
}

#zzsc {
	width: 920px;
	margin: 0px auto;
}
</style>
</head>

<body>
	<iframe allowtransparency="true"
		style="position: absolute; top: 0; left: 0;" frameborder="0"
		width="140" height="428" scrolling="no"
		src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=1&v=1&d=5&bd=0&k=000000&f=80ffff&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=59134&w=140&h=428&align=left"></iframe>
	<!-- Weather -->
	<!--<div id="weather-view-he"></div>
		<script>
			WIDGET = {
				ID: 'UQRzfYw3OR'
			};
		</script>
		<script type="text/javascript" src="https://apip.weatherdt.com/view/static/js/r.js?v=1111"></script>-->
	<!-- 戴布斯：添加提示弹框 -->
	<div class="alert"></div>
	<div class="content">
		<header class="codrops-header">
			<h1>
				<div id="zzsc">

					<canvas id="canvastime" width="920" height="400"></canvas>

				</div>
			</h1>
			<div class="button-wrap">
				<div class="cssBox">
					<div class="borderRadius">
						<div class="lfRaidus">
							<div class="ctRaidus"></div>
						</div>
						<div class="rtRaidus">
							<div class="ctRaidus"></div>
							<div class="hfPoint"></div>
							<div class="rtPoint"></div>
						</div>
					</div>
					<div class="imageRadius">
						<img src="img/clockimg/1.png" width="100%" alt="">
					</div>
					<div class="waveRaidus">
						<img src="img/clockimg/1.png" width="100%" alt="">
					</div>
					<div class="pointRadius">
						<img src="img/clockimg/2.png" width="100%" alt=""
							data-dialog="somedialog" onclick="openCamera()">
					</div>
				</div>
				</button>
			</div>
		</header>

		<div id="somedialog" class="dialog">
			<div class="dialog__overlay"></div>
			<div class="dialog__content">
				<div class="morph-shape"
					data-morph-open="M199.5,100c0,54.955-44.768,99.5-100,99.5s-100-44.545-100-99.5c0-54.956,44.769-99.5,100-99.5
S199.5,45.044,199.5,100z">
					<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
						viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
							<path
							d="M199.5,100c0,0.552-44.768,1-100,1s-100-0.448-100-1s44.769-1,100-1S199.5,99.448,199.5,100z"></path>
						</svg>
				</div>
				<div class="dialog-inner">

					<div id="media">
						<h2>JCP人脸识别</h2>
						<video id="video" width="300" height="100%" autoplay></video>
						<br />
						<canvas id="canvasvideo" name="canvasvideo" width="530"
							height="300" hidden="hidden"></canvas>
						<!-- 摄像头画面的js -->
						<script src="js/clockjs/clockvideo.js"></script>
					</div>
					<br /> <br />
					<div>
						<button class="action" data-dialog-close onclick="takePhoto()">刷脸打卡</button>
					</div>
				</div>
			</div>
		</div>

	</div>
	<!-- /content -->

	<script type="text/javascript" src="js/clockjs/classie.js"></script>
	<script type="text/javascript" src="js/clockjs/dialogFx.js"></script>
	<script type="text/javascript">
		(function() {

			var dlgtrigger = document.querySelector('[data-dialog]'),

			somedialog = document.getElementById(dlgtrigger
					.getAttribute('data-dialog')),
			// svg..
			morphEl = somedialog.querySelector('.morph-shape'), s = Snap(morphEl
					.querySelector('svg')), path = s.select('path'), initialPath = path
					.attr('d'), steps = {
				open : morphEl.getAttribute('data-morph-open')
			}, dlg = new DialogFx(somedialog, {
				onOpenDialog : function(instance) {
					// reset path
					morphEl.querySelector('svg > path').setAttribute('d',
							initialPath);
					// animate path
					path.stop().animate({
						'path' : steps.open
					}, 300, mina.easein);
				}
			});

			dlgtrigger.addEventListener('click', dlg.toggle.bind(dlg));

		})();
	</script>

</body>

</html>